<template>
    <div class="home-container">
        <!-- 精选专辑 -->
        <AlbumCarousel />

        <!-- 标签 -->
        <Tags />

        <!-- 热门歌单 -->
        <PlaylistCarousel>
            <PopularPlaylist />
        </PlaylistCarousel>
        
        <!-- 新歌推荐 -->
        <NewSongCarousel>
            <NewSongRecommendation />
        </NewSongCarousel>

        <!-- 热门歌手 -->
        <SingerCarousel />

        <!-- 精选视频 -->
        <FeaturedVedios />
    </div>
</template>

<script setup>
import AlbumCarousel from '@/components/home/AlbumCarousel/AlbumCarousel.vue';
import PlaylistCarousel from '@/components/home/PopularPlaylist/PlaylistCarousel.vue';
import PopularPlaylist from '@/components/home/PopularPlaylist/PopularPlaylist.vue';
import NewSongCarousel from '@/components/home/NewSongRecommendation/NewSongCarousel.vue';
import NewSongRecommendation from '@/components/home/NewSongRecommendation/NewSongRecommendation.vue';
import Tags from '@/components/home/Tag/Tags.vue';
import SingerCarousel from '@/components/home/PopularSinger/SingerCarousel.vue';
import FeaturedVedios from '@/components/home/FeaturedVideos/VideoCarousel.vue';
</script>

<style>
.home-container {
    padding: 20px;
    min-width: 1200px;
}
</style>